<template>
	<div class="search-wrap">
		<form>
			<div class="search-content">
				<div class="filter-condition" :class="showCondition ? 'active' : ''">
					<div @click="filter">{{condition.substr(0,2)}} <i class="iconfont arrow">&#xe65a;</i></div>

					<transition name="fade">
						<div class="condition-lists" v-if="companyLists && companyLists.length > 0">
							
							<div class="c-list-wrap">
								<div class="list bottom-border" @click="setCondition('', '全部')">全部</div> 
								<div class="list bottom-border" v-for="list in companyLists" @click="setCondition(list, list.companyName)">{{list.companyName}}</div>
							</div> 
						</div>
						<div class="condition-lists" v-else>
							<div class="list bottom-border" @click="setCondition('', '全部')">全部</div>
						</div>
					</transition>
				</div>

				<div class="right-search" @click="clickEvent">
					<i class="iconfont" :class="searchStatus || keyval != '' ? 'on' : ''">&#xe65c;</i>{{keyWord || '搜索'}}
					<!-- <input type="text" v-model="keyval" @focus="focusFn" @blur="blurFn" name="" :placeholder="placeholder"> -->
				</div>

				<button class="submit-btn" type="submit"></button>
			</div> 
		</form>

	</div>
</template>

<script type="text/javascript">
	
	export default {
		data() {
			return {
				keyval: this.keyWord || '',
				showCondition: false,
				searchStatus: false,
				placeholder: '搜索',
				companyLists: [],
				condition: '全部',
			}
		},

		props: {
			// fixed: {
			// 	type: Boolean,
			// 	default: true
			// },
			
			keyWord: [String],

			// 获取医药公司列表接口
			ajaxUrl: {
				type: [String],
				default: '/WeiXin/PersonCenter/myCompany'
			},

			company: {
				type: [String, Number]
			}
		},

		created() { 
			this.$axiosPost(this.ajaxUrl, {}, res => {
				this.companyLists = res.list;
			}, '请求失败');
		},

		methods: {
			search() {
				this.$emit('search', this.keyval)
			},

			filter() {
				this.showCondition = !this.showCondition;
			},

			focusFn() {
				this.searchStatus = true;
				this.placeholder = '';
			},

			blurFn() {
				this.searchStatus = false;
				this.placeholder = '搜索'; 
			},

			setCondition(obj, name) {
				let id = '';
				if (obj !== '') {
					id = obj.id || obj.companyId;
				}
				this.condition = name;
				this.$emit('set-company', id);
				this.showCondition = false;
			},

			clickEvent() {
				this.$emit('show-search-page');
			}
		},

		watch: {
			company(newV) {
				if (newV == 'reset') {
					this.setCondition('', '全部');
				}
			}
		}
	}

</script>

<style type="text/css" lang="scss">
	.search-content {
		position: relative;
		background: #fff;
		border-radius: 5px;
		height: 36px; 
		left: 0;
		display: flex;
		justify-content: space-between;

		.filter-condition {
			line-height: 36px;
			width: 86px;
			text-align: center;
			height: 100%;
			flex-shrink: 0;
			position: relative;
			color: #8A8A8C;

			&.active {
				.arrow {
					transform: rotate(90deg);
					top: -1px;
				}

				.condition-lists {
					display: block;
				}
			}

			&:after {
				position: absolute;
				content: '';
				display: block;
				width: 2px;
				height: 20px;
				background: #ccc;
				top: 8px;
				right: 0;
			}

			.arrow {
				width: 14px;
				font-size: 8px; 
				display: inline-block;
				transform: rotate(270deg);
				position: relative; 
			}

			.condition-lists {
				display: none;
				position: absolute;
				background: #fff;
				z-index: 100;
				top: 56px;
				width: 140px;
				/*max-height: 200px;*/
				/*overflow-y: auto;*/
				background: #FFFFFF;
				box-shadow: 0 2px 4px 0 rgba(0,0,0,0.10);
				border-radius: 6px 0 0 0 6px 6px 6px;
				border-radius: 5px;
				color: #222;

				&:after { 
					position: absolute;
					top: -24px;
					left: 51px; 
					content: '';
					display: block;
					width: 0;
					height: 0;
					border-top: 12px solid transparent;
					border-left: 9px solid transparent;
					border-right: 9px solid transparent;
					border-bottom: 12px solid #fff;

				}

				.list {
					padding: 15px 10px;
					/*height: 50px;*/
					line-height: 20px;
					text-align: center; 
					/*overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;*/
				}

				.c-list-wrap {
					max-height: 200px;
					overflow-y: auto;

					&::-webkit-scrollbar {
						width: 6px;
						height: 80px;  
						background: #fff;
						border-radius: 3px;
					}

					&::-webkit-scrollbar-track { 
						background: #F0F4F3;
					    border-radius: 10px;   
					}

					&::-webkit-scrollbar-thumb {
						width: 6px;
						height: 80px;
						border-radius: 5px;
						background: #C1C1C1;
					}
				}
			}
		}

		.right-search {
			position: relative;
			flex-grow: 1;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #ccc;

			i {
				font-size: 16px;
				// position: absolute;
				right: 50%; 
				margin-right: 10px;
				color: #ccc;
				top: 6px;
				width: 16px;
				height: 16px;
				line-height: 1;
				transition: right .1s;

				&.on {
					right: 0;
					margin-right: 10px;
					right: 0;
				}
			}

			input {
				text-align: center;
				width: 100%;
				background: transparent;
				height: 100%;
				padding: 0 16px;
			}
		}


	}
	.search-wrap {
		padding: 10px 15px 8px;
		background: #f4f4f4;
		height: 54px;
	}

	.submit-btn {
		position: absolute;
		left: -10000px;
	}

</style>